"use client";

import { useEffect, useState } from "react";
import Image from 'next/image';

const Reviews: React.FC = () => {
  const [mounted, setMounted] = useState(false);

  // Sample review data
  const reviews = [
    {
      id: 1,
      name: "Emma.L",
      title: "(Brand Owner)",
      content: "Quickly produces high-quality videos with better-than-expected ad performance.",
      star: "/images/pink-star.png",
    },
    {
      id: 2,
      name: "Emma.L",
      title: "(Brand Owner)",
      content: "Quickly produces high-quality videos with better-than-expected ad performance.",
      star: "/images/purple-star.png",
    },
    {
      id: 3,
      name: "Emma.L",
      title: "(Brand Owner)",
      content: "Quickly produces high-quality videos with better-than-expected ad performance.",
      star: "/images/green-star.png",
    },
    {
      id: 4,
      name: "Emma.L",
      title: "(Brand Owner)",
      content: "Quickly produces high-quality videos with better-than-expected ad performance.",
      star: "/images/pink-star.png",
    },
    {
      id: 5,
      name: "Emma.L",
      title: "(Brand Owner)",
      content: "Quickly produces high-quality videos with better-than-expected ad performance.",
      star: "/images/purple-star.png",
    },
    {
      id: 6,
      name: "Emma.L",
      title: "(Brand Owner)",
      content: "Quickly produces high-quality videos with better-than-expected ad performance.",
      star: "/images/green-star.png",
    },
    {
      id: 7,
      name: "Emma.L",
      title: "(Brand Owner)",
      content: "Quickly produces high-quality videos with better-than-expected ad performance.",
      star: "/images/pink-star.png",
    },
    {
      id: 8,
      name: "Emma.L",
      title: "(Brand Owner)",
      content: "Quickly produces high-quality videos with better-than-expected ad performance.",
      star: "/images/purple-star.png",
    },
  ];

  // Duplicate reviews for continuous scrolling effect
  const reviewsRow1 = [...reviews, ...reviews];
  const reviewsRow2 = [...reviews.reverse(), ...reviews.reverse()];

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <div className="flex items-center justify-center min-h-[400px]">
      <div className="text-center text-gray-400">Loading...</div>
    </div>;
  }

  return (
    <section className="py-15 bg-white">
      <div className="mx-auto px-4 mb-1 flex justify-center">
        <h2 className="font-outfit text-[48px] font-semibold leading-normal text-center flex items-center text-[#4E5469]">
          User Reviews
        </h2>
      </div>

      <div className="w-full">
        {/* First row - scrolls left to right */}
        <div className="marquee-wrapper">
          <div className="marquee-container">
            <div className="marquee">
              {reviewsRow1.map((review, index) => (
                <div key={`row1-${review.id}-${index}`} className="review-card-wrapper">
                  <div className="review-card bg-[#F8F8F8] shadow rounded-[24px] p-6">
                    <div className="mb-3">
                      <div className="w-8 h-8 rounded-[8px] flex items-center justify-center mb-2 bg-[#F8F8F8]">
                        <Image 
                          src={review.star} 
                          alt="Star" 
                          width={24} 
                          height={24} 
                        />
                      </div>
                      <h4 className="text-gray-800 font-medium">{review.name}</h4>
                      <p className="text-sm text-gray-500">{review.title}</p>
                    </div>
                    <p className="text-gray-700 break-words whitespace-normal">{review.content}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Second row - scrolls right to left */}
        <div className="marquee-wrapper">
          <div className="marquee-container">
            <div className="marquee marquee-reverse">
              {reviewsRow2.map((review, index) => (
                <div key={`row2-${review.id}-${index}`} className="review-card-wrapper">
                  <div className="review-card bg-[#F8F8F8] shadow rounded-[24px] p-6">
                    <div className="mb-3">
                      <div className="w-8 h-8 rounded-[8px] flex items-center justify-center mb-2 bg-[#F8F8F8]">
                        <Image 
                          src={review.star} 
                          alt="Star" 
                          width={24} 
                          height={24} 
                        />
                      </div>
                      <h4 className="text-gray-800 font-medium">{review.name}</h4>
                      <p className="text-sm text-gray-500">{review.title}</p>
                    </div>
                    <p className="text-gray-700 break-words whitespace-normal">{review.content}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style jsx global>{`
        .marquee-wrapper {
          position: relative;
          width: 100%;
          height: 260px; /* Increased to accommodate larger cards */
        }
        
        .marquee-container {
          width: 100%;
          height: 100%;
          overflow: hidden;
          position: absolute;
          top: 0;
          left: 0;
        }

        .marquee {
          display: flex;
          width: max-content;
          height: 100%;
          animation: marquee 30s linear infinite;
          padding: 0px 0; /* Increased padding */
        }

        .marquee-reverse {
          animation: marquee-reverse 30s linear infinite;
        }

        @keyframes marquee {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(-50%);
          }
        }

        @keyframes marquee-reverse {
          0% {
            transform: translateX(-50%);
          }
          100% {
            transform: translateX(0);
          }
        }

        /* Pause animation when hovering on container */
        .marquee-container:hover .marquee {
          animation-play-state: paused;
        }
        
        /* Card wrapper to provide space for scaling */
        .review-card-wrapper {
          padding: 12px;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        /* Add hover zoom effect to review cards */
        .review-card {
          width: 384px; /* User specified width */
          height: 196px; /* User specified height */
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column;
        }
        
        .review-card-wrapper:hover .review-card {
          transform: scale(1.05);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
          z-index: 10;
        }
      `}</style>
    </section>
  );
};

export default Reviews; 